<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"/>
      <List :todos="todos" :changeTodoChecked="changeTodoChecked" :deleteTodo="deleteTodo"/>
      <Footer :todos="todos" :changeAllTodoChecked="changeAllTodoChecked" :deleteAllSelectedTodo="deleteAllSelectedTodo"/>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components: {Footer, List, Header},
  data(){
    return {
      todos:sessionStorage.todos? JSON.parse(sessionStorage.todos):[
        {id:'001',title:'抽烟',done:false},
        {id:'002',title:'喝酒',done:true},
        {id:'003',title:'烫头',done:false},
      ]
    }
  },
  updated() {
    sessionStorage.setItem('todos',JSON.stringify(this.todos))
  },
  methods:{
  //  添加todo
    addTodo(todo){
      this.todos.unshift(todo)
    },
  //  改变单个todo的选中状态
    changeTodoChecked(id){
      this.todos.forEach(item=>{
        if(item.id===id){
          item.done = !item.done
        }
      })
    },
  //  删除单个todo
    deleteTodo(id){
      this.todos = this.todos.filter(item=>item.id!==id)
    },
  //  批量改变所有todo状态
    changeAllTodoChecked(val){
      this.todos.forEach(item=>{
        item.done = val
      })
    },
  //  批量删除todo
    deleteAllSelectedTodo(){
      this.todos = this.todos.filter(item=>!item.done)
    }
  }
}
</script>

<style>
@import url('@/assets/css/Base.css');
</style>